<template>
  <div>
    <div v-html="msg"></div>
    <vue-ueditor-wrap
      v-model="msg"
      :config="myConfig"
      @beforeInit="addCustomButtom"
    ></vue-ueditor-wrap>
    <Modal v-model="imageChooseDialog" :hasCloseIcon="true">
      <div style="width:700px;max-width:730px;min-width:700px;">
        <ImageCheck :isShowCheckBtn="true" @choose="chooseImg" />
      </div>
    </Modal>
  </div>
</template>
<style scoped>
</style>
<script>
import VueUeditorWrap from "vue-ueditor-wrap";
import ImageCheck from "@/components/ImageCheck/index.vue";
export default {
  name: "UEditor",
  components: {
    VueUeditorWrap,
    ImageCheck
  },
  data() {
    return {
      imageChooseDialog: false,
      msg: "",
      myConfig: {
        serverUrl: "",
        UEDITOR_HOME_URL: "/editor/"
      }
    };
  },
  methods: {
    chooseImg(e) {
      this.msg += `<img src='${e.src}' style="max-width:100%">`;
    },
    addCustomButtom(editorId) {
      let that = this;
      window.UE.registerUI(
        "选取图片",
        function(editor, uiName) {
          // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
          editor.registerCommand(uiName, {
            execCommand: function() {
              /*  editor.execCommand(
                "inserthtml",
                `<span>这是一段由自定义按钮添加的文字</span>`
              ); */
              // that.imageChooseDialog = true;
            }
          });

          // 创建一个 button
          var btn = new window.UE.ui.Button({
            // 按钮的名字
            name: uiName,
            // 提示
            title: "选择已上传的图片",
            // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
            cssRules:
              "background-image: url('../images/icons.png');background-position: -726px -77px",
            // 点击时执行的命令
            onclick: function() {
              // 这里可以不用执行命令，做你自己的操作也可
              // editor.execCommand(uiName);
              that.imageChooseDialog = true;
            }
          });

          // 当点到编辑内容上时，按钮要做的状态反射
          editor.addListener("selectionchange", function() {
            var state = editor.queryCommandState(uiName);
            if (state === -1) {
              btn.setDisabled(true);
              btn.setChecked(false);
            } else {
              btn.setDisabled(false);
              btn.setChecked(state);
            }
          });
          return btn;
        },
        34,
        editorId /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */
      );
    }
  },
  mounted() {}
};
</script>